<template>
  <div class="tree-node" :style="styles">
    <span class="tree-node-title">
      <slot name="title"></slot>
    </span>
    <slot name="extra"></slot>
  </div>
</template>

<script>
export default {
  name: "TreeNode",
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  computed: {
    styles() {
      let level = 0;
      if (this.node && this.node.level) {
        level = this.node.level;
      }
      return {
        width: `${350 - level * 17}px`,
      };
    },
  },
};
</script>

<style lang="less">
@bg: transparent;
.tree-node {
  // height: 36px;
  position: relative;
  display: inline-flex;
  background-color: @bg;
  align-items: center;
  padding: 0 12px;
  border: solid 1px @bg;
  font-weight: 500;
  line-height: 30px;
  transition: all 1s;
  &:hover:not(:active) {
    border-color: #dcdee2;
    border-style: dashed;
  }

  &:active {
    border-color: #dcdee2;
    border-style: solid;
  }

  &-selectable {
    color: #dcdee2;
    & .ivu-icon {
      font-size: 20px;
      margin: 0 5px 0 -5px;
      color: inherit;
      transition: color 0.5s;
    }

    &.selected {
      color: #19be6b;
    }
  }

  &-title {
    flex: 1;
  }
  &-extra {
  }
}
</style>
